<template>
  <div class="box no-border">
    <div class="box-header with-border">
      <el-row>
        <el-col :span="6">
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>150</h3>
              <p>New Order</p>
            </div>
            <div class="icon">
              <i class="fa fa-shopping-cart"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="small-box bg-green">
            <div class="inner">
              <h3>53<sup style="font-size: 20px">%</sup></h3>
              <p>Bounce Rate</p>
            </div>
            <div class="icon">
              <i class="fa fa-line-chart"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="small-box bg-orange">
            <div class="inner">
              <h3>67</h3>
              <p>User Registrations</p>
            </div>
            <div class="icon">
              <i class="fa fa-user-plus"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="small-box bg-red">
            <div class="inner">
              <h3>33</h3>
              <p>Unique Visitors</p>
            </div>
            <div class="icon">
              <i class="fa fa-pie-chart"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="box-body no-border">
      <el-tabs v-model="activeName">
        <el-tab-pane label="系统公告" name="1st">
          <sea-request url="/sys/bulletin/last" :params="{bulletinType: 1}">
            <div class="box no-border no-shadow" slot-scope="{response, reload, loading}">
              <sea-skeleton :data="response" :loading="loading" :row="6">
                <div v-if="response">
                  <div class="box-header with-border">
                    <h3 class="pull-left box-title">{{ response.bulletinTitle }}</h3>
                    <span class="pull-right">
                    <span class="text">{{ response.bulletinOwner }}</span>
                    <small class="label label-default"><i class="fa fa-clock-o"></i>{{ response.gmtPublish }}</small>
                  </span>
                    <div class="clearfix"></div>
                  </div>
                  <div class="box-body no-border">
                    <div style="border-top: 1px solid #e6e7e8; background: #f4f4f4; padding: 10px;"
                         v-html="response.content"></div>
                  </div>
                </div>
              </sea-skeleton>
            </div>
          </sea-request>
        </el-tab-pane>
        <el-tab-pane label="Item2" name="2nd">Item2</el-tab-pane>
        <el-tab-pane label="Item3" name="3rd">Item3</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
/**
 * 首页
 */
export default {
    name: "message",
    data() {
        return {
            // tab 页
            activeName: '1st',
            // 系统公告内容
            bulletin: undefined
        };
    }
}
</script>
